<template>
	<view>
		<view class="image-list" :class="['image-list-'+ imageList.length,{'isPadLeft':isPadLeft}]"
			v-if="imageList.length > 0 && imageList[0].fileType == 1">
			<view class="" v-if="imageList&&imageList.length" :style="{height: boxHight,width: basicsWidth + 'rpx'}">
				<view class="imgBox" :class="'imgBox'+imageList.length">
					<view class="outitem" v-for="(item,index) in forList" :key="index">
						<view class="ineritem" v-for="(item1,index1) in item" :key="index1"
							@tap.stop.prevent="previewImg(imageList, item[index1])">
							<uv-image :src="imageList[item[index1]].fileUrl + '?imageView2/3/w/500/h/500'"
								:lazyLoad="true" :observeLazyLoad="true" width="100%" height="100%"
								:radius="radiusList[imageList.length-1][index][index1]"></uv-image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- :radius="radiusList[imageList.length-1][item[index1]]" -->
		<view class="image-list" :class="[{'isPadLeft':isPadLeft}]"
			v-if="imageList.length > 0 && imageList[0].fileType == 2">
			<view class="image-warps" @tap.stop.prevent="onPreviewVideo(imageList[0])">
				<video :style="[videoHeight]" loop class="video" :controls="false" :show-center-play-btn="false"
					:auto-pause-if-navigate="false" :auto-pause-if-open-native="false" :src="imageList[0].fileUrl"
					id="video-full" autoplay muted @loadedmetadata="loadedmetadata">
					<view class="video-time">{{videoTime}}</view>
				</video>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				rpx: app.globalData.widthPx / 750,
				duration_v: 0.1,
				countDown_v: 0.1,
				videoTime: '00:00',
				timer: null,
				videoplay: {},
				allCountList: [
					[
						[0]
					],
					[
						[0],
						[1]
					],
					[
						[0],
						[1, 2]
					],
					[
						[0, 1],
						[2, 3]
					],
					[
						[0, 1],
						[2, 3, 4]
					],
					[
						[0, 1],
						[2, 3],
						[4, 5]
					],
					[
						[0, 1],
						[2, 3],
						[4, 5, 6]
					],
					[
						[0, 1, 2],
						[3, 4, 5],
						[6, 7]
					],
					[
						[0, 1, 2],
						[3, 4, 5],
						[6, 7, 8]
					],
				],
				radiusList: [
					[
						["20rpx 20rpx 20rpx 20rpx"]
					],
					[

						["20rpx 0rpx 0rpx 20rpx"],
						["0rpx 20rpx 20rpx 0rpx"]
					],
					[
						["20rpx 0rpx 0rpx 20rpx"],
						["0rpx 20rpx 0rpx 0rpx", "0rpx 0rpx 20rpx 0rpx"]
					],
					[
						["20rpx 0rpx 0rpx 0rpx", "0rpx 0rpx 0rpx 20rpx"],
						["0rpx 20rpx 0rpx 0rpx", "0rpx 0rpx 20rpx 0rpx"]
					],

					[
						["20rpx 0rpx 0rpx 0rpx", "0rpx 0rpx 0rpx 20rpx"],
						["0rpx 20rpx 0rpx 0rpx", undefined, "0rpx 0rpx 20rpx 0rpx"]
					],
					[
						["20rpx 0rpx 0rpx 0rpx", "0rpx 0rpx 0rpx 20rpx"],
						[undefined, undefined],
						["0rpx 20rpx 0rpx 0rpx", "0rpx 0rpx 20rpx 0rpx"]
					],
					[
						["20rpx 0rpx 0rpx 0rpx", "0rpx 0rpx 0rpx 20rpx"],
						[undefined, undefined],
						["0rpx 20rpx 0rpx 0rpx", undefined, "0rpx 0rpx 20rpx 0rpx"]
					],
					[
						["20rpx 0rpx 0rpx 0rpx", undefined, "0rpx 0rpx 0rpx 20rpx"],
						[undefined, undefined, undefined],
						["0rpx 20rpx 0rpx 0rpx", "0rpx 0rpx 20rpx 0rpx"]
					],
					[
						["20rpx 0rpx 0rpx 0rpx", undefined, "0rpx 0rpx 0rpx 20rpx"],
						[undefined, undefined, undefined],
						["0rpx 20rpx 0rpx 0rpx", undefined, "0rpx 0rpx 20rpx 0rpx"]
					],
				]
			};
		},
		options: {},
		props: {
			imageList: {
				type: Array,
				default () {
					return []
				}
			},
			basicsWidth: {
				type: [String, Number],
				default: 0
			},
			isPadLeft: {
				type: Boolean,
				default: true
			},
			from: {
				type: [String, Number],
				default: ''
			},
		},
		created() {},
		beforeDestroy() {
			clearTimeout(this.timer)
		},
		computed: {
			forList() {
				if (!this.imageList || !this.imageList.length) {
					return []
				}
				return this.allCountList[this.imageList.length - 1]
			},

			videoHeight() {
				if (this.imageList.length < 1 || this.imageList[0].fileType != 2 || !this.imageList[0].fileHeight || !this
					.imageList[0].fileWidth) {
					return null
				}
				let fileWidth = this.imageList[0].fileWidth / this.rpx
				let fileHeight = this.imageList[0].fileHeight / this.rpx
				let bizhiw = fileWidth / this.basicsWidth
				let bizhih = fileHeight / this.basicsWidth
				let proportion = fileHeight / fileWidth
				let videoWidth = null
				let videoHeight = null

				//视频高度小于box
				if (fileHeight < this.basicsWidth) {
					videoHeight = fileWidth / bizhih > this.basicsWidth ? this.basicsWidth / bizhiw : fileHeight
					videoWidth = fileWidth / bizhih > this.basicsWidth ? this.basicsWidth : fileWidth / bizhih
				} else {
					videoWidth = fileWidth / bizhih > this.basicsWidth ? this.basicsWidth : fileWidth / bizhih
					videoHeight = videoWidth * proportion
				}
				return {
					'width': videoWidth + 'rpx',
					'height': videoHeight + 'rpx',
					'border-radius': '15rpx'
				}
			},

			boxHight() {
				switch (this.imageList.length) {
					case 1:
						return this.basicsWidth + 'rpx'
					case 2:
						return this.basicsWidth / 2 + 'rpx'
					case 3:
						return this.basicsWidth / 2 + 6 + 'rpx'
					case 4:
						return this.basicsWidth + 6 + 'rpx'
					case 5:
						return this.basicsWidth + 6 + 'rpx'
					case 6:
						return this.basicsWidth / 3 * 2 + 6 + 'rpx'
					case 7:
						return this.basicsWidth + 12 + 'rpx'
					case 8:
						return this.basicsWidth + 12 + 'rpx'
					case 9:
						return this.basicsWidth + 'rpx'
				}
			},
			imageRadius() {
				return function(index) {
					switch (this.imageList.length) {
						case 1:
							return '20'
						case 2:
							if (index == 0)
								return '20rpx 0rpx 0rpx 20rpx'
							if (index == 1)
								return '0rpx 20rpx 20rpx 0rpx'
						case 3:
							if (index == 0)
								return '20rpx 0rpx 0rpx 20rpx'
							if (index == 1)
								return '0rpx 20rpx 0rpx 0rpx'
							return '0rpx 0rpx 20rpx 0rpx'
						case 4:
							if (index == 0)
								return '20rpx 0rpx 0rpx 0'
							if (index == 1)
								return '0rpx 20rpx 0rpx 0rpx'
							if (index == 2)
								return '0rpx 0rpx 0rpx 20rpx'
							return '0rpx 0rpx 20rpx 0rpx'
						case 5:
							if (index == 0)
								return '20rpx 0rpx 0rpx 0'
							if (index == 1)
								return '0rpx 20rpx 0rpx 0rpx'
							if (index == 2)
								return '0'
							if (index == 3)
								return '0rpx 0rpx 0rpx 20rpx'
							return '0rpx 0rpx 20rpx 0rpx'
						case 6:
							if (index == 0)
								return '20rpx 0rpx 0rpx 0'
							if (index == 1 || index == 4)
								return '0'
							if (index == 2)
								return '0rpx 20rpx 0rpx 0rpx'
							if (index == 3)
								return '0rpx 0rpx 0rpx 20rpx'
							return '0rpx 0rpx 20rpx 0rpx'
						case 7:
							if (index == 0)
								return '20rpx 0rpx 0rpx 0'
							if (index == 1 || index == 5 || index == 3)
								return '0'
							if (index == 2)
								return '0rpx 20rpx 0rpx 0rpx'
							if (index == 4)
								return '0rpx 0rpx 0rpx 20rpx'
							return '0rpx 0rpx 20rpx 0rpx'
						case 8:
							if (index == 0)
								return '20rpx 0rpx 0rpx 0'
							if (index == 1 || index == 3 || index == 4 || index == 6)
								return '0'
							if (index == 2)
								return '0rpx 20rpx 0rpx 0rpx'
							if (index == 5)
								return '0rpx 0rpx 0rpx 20rpx'
							return '0rpx 0rpx 20rpx 0rpx'
						case 9:
							if (index == 0)
								return '20rpx 0rpx 0rpx 0'
							if (index == 2)
								return '0rpx 20rpx 0rpx 0rpx'
							if (index == 6)
								return '0rpx 0rpx 0rpx 20rpx'
							if (index == 8)
								return '0rpx 0rpx 20rpx 0rpx'
							return '0'
					}
				}
			}
		},
		/**
		 * 组件的方法列表
		 * 更新属性和数据的方法与更新页面数据的方法类似
		 */
		methods: {
			onPreviewVideo(item) {
				wx.previewMedia({
					sources: [{
						url: item.fileUrl, //视频播放路径
						type: 'video' //video视频 image图片
					}]
				})
				// if (this.from == 'details') {
				// 	wx.previewMedia({
				// 		sources: [{
				// 			url: item.fileUrl, //视频播放路径
				// 			type: 'video' //video视频 image图片
				// 		}]
				// 	})
				// } else {
				// 	this.$emit('clickVideo', item)
				// }
			},
			previewImg(img, index) {
				// 预览图片
				this.$emit('previewImg')
				let imageUrl = []
				img.forEach((item) => {
					imageUrl.push(item.fileUrl)
				})
				uni.previewImage({
					current: index,
					urls: imageUrl,
				})
			},
			durationFormatter(time) {
				if (!time) return {
					ss: 0
				}
				let t = time
				const ss = t % 60
				t = (t - ss) / 60
				if (t < 1) return {
					ss
				}
				const mm = t % 60
				t = (t - mm) / 60
				if (t < 1) return {
					mm,
					ss
				}
				const hh = t % 24
				t = (t - hh) / 24
				if (t < 1) return {
					hh,
					mm,
					ss
				}

				return {
					hh,
					mm,
					ss
				}
			},
			formatNum: function(num) {
				return num < 10 ? '0' + num : num + '';
			},
			countDown(duration) {
				this.timer && clearTimeout(this.timer)
				const {
					hh,
					mm,
					ss
				} = this.durationFormatter(duration)
				this.hours = hh || 0
				this.mins = mm || 0
				this.countDown_v = ss || 0
				this.videoTime = this.hours == 0 ? this.formatNum(this.mins) + ':' + this.formatNum(this.countDown_v) :
					this.formatNum(this.hours) + ':' + this.formatNum(this.mins) + ':' + this.formatNum(this.countDown_v)
				this.timer = setInterval(() => {
					if (this.countDown_v > 1) {
						this.countDown(this.countDown_v - 1)
					} else {
						setTimeout(() => {
							// this.videoplay.play()
							this.countDown(this.duration_v)
						})
					}
				}, 1000);
			},


			// 加载完成
			loadedmetadata(e) {
				const {
					duration
				} = e.detail
				this.videoplay = uni.createVideoContext('video-full');
				// 记录视频总时间
				this.duration_v = Math.round(duration)
				this.countDown(this.duration_v)
				// 回调
				this.$emit('loadcomplete')
			}
		}
	};
</script>
<style lang="scss">
	.image-list {
		box-sizing: border-box;

		.imgBox {
			display: flex;
			width: 100%;
			height: 100%;
			font-size: 0;

			.outitem {
				display: flex;
				height: 100%;
				flex-direction: column;
			}

			.ineritem {
				width: 100%;
			}

			.outitem:not(:last-of-type) {
				margin-right: 6rpx;
			}

			.ineritem:not(:last-of-type) {
				margin-bottom: 6rpx;
			}
		}

		.imgBox9 {
			.outitem {
				width: 33.33%;
			}

			.ineritem {
				height: 33.33%;
			}

		}

		.imgBox8 {
			.outitem {
				width: 33.33%;
			}

			.outitem:nth-child(1),
			.outitem:nth-child(2) {
				.ineritem {
					height: 33.33%;
				}
			}

			.outitem:nth-child(3) {
				.ineritem {
					height: 50%;
				}
			}

		}

		.imgBox7 {
			.outitem {
				width: 33.33%;
			}

			.outitem:nth-child(1),
			.outitem:nth-child(2) {
				.ineritem {
					height: 50%;
				}
			}

			.outitem:nth-child(3) {
				.ineritem {
					height: 33.33%;
				}
			}

		}

		.imgBox6 {
			.outitem {
				width: 33.33%;
			}

			.ineritem {
				height: 50%;
			}

		}

		.imgBox5 {

			.outitem:nth-child(1) {
				width: 66.66%;

				.ineritem {
					height: 50%;
				}
			}

			.outitem:nth-child(2) {
				width: 33.33%;

				.ineritem {
					height: 33.33%;
				}
			}

		}

		.imgBox4 {
			.outitem {
				width: 50%;
			}

			.ineritem {
				height: 50%;
			}
		}

		.imgBox3 {
			.outitem:nth-child(1) {
				width: 66.66%;

				.ineritem {
					height: 100%;
				}
			}

			.outitem:nth-child(2) {
				width: 33.33%;

				.ineritem {
					height: 50%;
				}
			}
		}

		.imgBox2 {
			.outitem {
				width: 50%;
			}

			.ineritem {
				height: 100%;
			}
		}

		.imgBox1 {
			.outitem {
				width: 100%;
			}

			.ineritem {
				height: 100%;
			}
		}




		.image-warps {
			position: relative;

			.video-time {
				width: calc(100% - 10rpx);
				text-align: end;
				font-size: 26rpx;
				font-weight: 900;
				color: #FFFFFF;
				line-height: 42rpx;
				position: absolute;
				right: 10rpx;
				bottom: 10rpx;
				z-index: 2;
			}

			.status_type {
				position: absolute;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 40rpx;
				top: 0;
				left: 0;
				background: rgba(0, 0, 0, 0.2);

				.play {
					width: 20%;
				}
			}
		}

		&.isPadLeft {
			padding-left: 106rpx;
		}
	}
</style>